<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <!-- <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/reset.css"> -->

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/jquery.js?v=2"></script>
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/swiper.min.css">

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/swiper-3.4.2.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>

    <script>
        init();
        window.onresize = init;
        function init(){
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 7.5 + 'px';
        }
    </script>
    <title>{$theme['title']}</title>
    <style>
        body{
            background: #f7f7f7;
        }
        .wrap{
            margin: 0.16rem auto;
            width: 7.18rem;
        }
        .wrap .top_img{
            width: 7.18rem;
            height: 2.95rem;
            border-radius: 0.2rem;
        }
        .wrap .item{

            border-radius: 0.2rem;
            background: #ffffff;
            margin-top: 0.23rem;
            overflow: hidden;
        }
        .wrap .item .top{
            display: flex;
        }
        .wrap .item .icon{
            width: 1.1rem;
            padding-left: 0.14rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .item .icon img{
            width: 0.55rem;
            height: 0.55rem;

        }
        .wrap .item .right{
            font-size: 0.24rem;
            color: #999999;
        }
        .wrap .item .right .h{
            font-size: 0.32rem;
            color: #333333;
            line-height: 0.88rem;
        }
        .wrap .item .right ul li{
            padding-left: 0.27rem;
            padding-right: 0.5rem;
            line-height: 0.34rem;
            margin-bottom: 0.1rem;
            position: relative;
        }
        .wrap .item .right ul li::before{
            content: "";
            width: 0.06rem;
            height: 0.06rem;
            border-radius: 0.06rem;
            background-color: #b5b5b5;
            position: absolute;
            left: 0.04rem;
            top: 0.16rem;
        }
        .wrap .item .button{
            line-height: 0.9rem;
            background-image: linear-gradient(to bottom,#ffdfe3,#ffdde9);
            font-size: 0.28rem;
            color: #fd4383;
            text-align: center;
            margin-top: 0.3rem;
        }
        .wrap .group .icon img{
            width: 0.61rem;
            height: 0.45rem;
        }
        .wrap .group .right ul li{
            padding-left: 0;
        }
        .wrap .group .right ul li::before{
            display: none;
        }
        .wrap .group .button{
            background-image: linear-gradient(to bottom,#ecdffe,#efe1fe);
            color: #7e4cf7;
        }
        
        
        .wrap .form{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            min-height: 100vh;
            background-color: #f7f7f7;
            padding: 0.16rem;
            top: 100vh;
            transition: top 1s;
        }
        .wrap .form.show{
            top: 0;
        }
        .wrap .card{
            background: #ffffff;
            padding: 0 0.3rem;
            border-radius: 0.2rem;
            margin-bottom: 0.2rem;
        }
        .wrap .card .title{
            line-height: 0.8rem;
            font-size: 0.32rem;
            padding-left: 0.24rem;
            position: relative;
        }
        .wrap .card .title::after{
            content: "";
            display: block;
            position: absolute;
            width: 0.08rem;
            height: 0.31rem;
            background: linear-gradient(to bottom,#f94084,#fed5e4);
            top: 0;
            bottom: 0;
            margin: auto;
            left: 0.01rem;
            border-radius: 0.31rem;
        }
        .wrap .card .form_item{
            height: 0.96rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.01rem solid #f7f7f7;
        }
        .wrap .card .form_item:last-child{
            border-bottom: none;
        }
        .wrap .card .form_item span{
            color: #333333;
            font-size: 0.24rem;
        }
        .wrap .card .form_item input{
            border: none;
            text-align: right;
            color: #333333;
        }
        .wrap .card .form_item input::-webkit-input-placeholder { /* Edge */
            color: #999999;
        }
        .wrap .card .form_item input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #999999;
        }
        .wrap .card .form_item input::placeholder {
            color: #999999;
        }
        .wrap .card .form_item select{
            color: #333333;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-right: 0.3rem;
            outline: none;
        }
        .wrap .card  .select{
            position: relative;
        }
        .wrap .card .select::after,.wrap .card .select::before {
            width: 0;
            height: 0;
            border: 0.1rem solid transparent;
            border-top-color: #ffffff;
            position: absolute;
            content: "";
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .wrap .card .select::before{
            top: 0;
            right: 0;
            transform: translateY(0.02rem);
            border-top-color: #999999;
        }

        
        .wrap .card .form_item .item{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 0.28rem;
        }
        .wrap .card .form_item .radio_box{
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .wrap .card .form_item .radio_box .checkbox_img{
            width: 0.13rem;
            height: 0.09rem;
            display: none;
        }
        .wrap .card .form_item .radio_box .input{
            width: 0.27rem;
            height: 0.27rem;
            border-radius: 0.27rem;
            background: #f7f7f7;
            border: 0.01rem solid #eeeeee;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.15rem;
        }
        .wrap .card .form_item input:checked+.input{
            background-image: linear-gradient(to top,#f8277a,#fe848d);
        }
        .wrap .card .form_item input:checked+.input .checkbox_img{
            display: block;
        }
        .wrap .card .form_item .radio_box input{
            display: none;
        }

        
        .wrap .card .li{
            display: flex;
            justify-content: flex-start;
            padding: 0.24rem 0.11rem;
            background: #ffffff;
            border-radius: 0.2rem;
            position: relative;
            border-bottom: 0.01rem solid #f7f7f7;
        }
        .wrap .card .li:last-child{
            border-bottom: none;
        }
        .wrap .card .li .head_img{
            width: 1.22rem;
            height: 1.22rem;
            border-radius: 0.14rem;
            flex-grow: 7;
        }
        .wrap .card .li .right{
            color: #999999;
            font-size: 0.24rem;
            padding-left: 0.4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }
        .wrap .card .li .right .tit{
            width: 4.8rem;
            color: #333333;
            font-size: 0.28rem;
        }
        
        .wrap .card .li .right .data{
            display: flex;
            justify-content: flex-start;
            padding-top: 0.16rem;
            line-height: 0.42rem;
        }
        .wrap .card .li .right .data .d_left,.wrap .card .li .right .data .d_right{
            display: flex;
            flex-direction: column;
        }
        .wrap .card .li .right .data .d_left{
            padding-right: 0.3rem;
            position: relative;
        }
        .wrap .card .li .right .data .d_right{
            padding-left: 0.3rem;
        }
        .wrap .card .li .right .data .d_right .dr_t{
            font-size: 0.28rem;
            color: #f91d76;
        }
        .wrap .card .li .right .data .d_right .dr_b{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .card .li .right .data .d_right .dr_b img{
            width: 0.21rem;
            height: 0.21rem;
            margin-right: 0.07rem;
        }
        .wrap .card .li .right .name{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 0.1rem;
            margin-top: 0.1rem;
        }
        .wrap .card .li .right .name span{
            color: #5086ff;
            background: #ecf5ff;
            line-height: 0.32rem;
            padding: 0 0.08rem;
            font-size: 0.2rem;
            border-radius: 0.06rem;
        }
        .wrap .card .li .right .d_txt{
            color: #999999;
            font-size: 0.24rem;
            line-height: 0.38rem;
        }
        .wrap .card .li .right .d_txt span{
            font-size: 0.26rem;
            color: #f91d76;
        }
        .wrap .form .button{
            height: 0.86rem;
            background:linear-gradient(to right,#f82079,#fe878e);
            color: #ffffff;
            font-size: 0.28rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.26rem;
            border-radius: 0.2rem;
            margin: 0 auto;
        }
        .wrap .form .button.over{
            background: #999;
            color: #eee;
            margin-top: 0.2rem;
        }
    </style>
</head>
<body>
<div class="wrap">
    <img class="top_img" src="{$_G['URL']['BEILAI_IMG']}/contact_banner.png">
    <div class="item organization">
        <div class="top">
            <div class="icon">

                <img src="{$_G['URL']['BEILAI_IMG']}/contact_icon1.png">
            </div>
            <div class="right">
                <div class="h">我是机构，我们的校区也要参加活动</div>
                <ul>
                    <li>我是一家培训机构，我要参加这样的活动</li>
                    <li>我们校区要组织这样的活动(平台派人驻店全程指导，提供软件技术支持)</li>
                    <li>我有团队，我要申请城市服务商</li>
                </ul>
            </div>
        </div>
        {if !$has_flag}
        <div class="button">立即加入</div>
        {else}
        <div class="button over">已申请</div>
        {/if}
    </div>
    <div class="item group">
        <div class="top">

            <div class="icon">

                <img src="{$_G['URL']['BEILAI_IMG']}/group.png">
            </div>
            <div class="right">
                <div class="h">我有团队，我要申请城市服务商</div>
                <ul>
                    <li>与平台一起携手，磬助更多教培机构赋船，共同开拓市场</li>
                </ul>
            </div>
        </div>
        {if !$has_flag}
        <div class="button">立即加入</div>
        {else}
        <div class="button over">已申请</div>
        {/if}

    </div>
    
    <div class="form">
                
        <div class="card" id="o_form">
            <div class="title">请填写你的信息</div>
            <div class="form_item">
                <span>机构名称</span>
                <input class="company_name" type="text" name="company_name" placeholder="请填写机构名称">
            </div>
            <div class="form_item">
                <span>负责人姓名</span>
                <input class="username" type="text" name="username" placeholder="请填写负责人姓名">
            </div>
            <div class="form_item">
                <span>所在城市</span>
                <input class="address" type="text" name="address" placeholder="请输入所在城市">
            </div>
            <div class="form_item">
                <span>手机号</span>
                <input class="mobile" type="text" name="mobile" placeholder="请填写手机号">
            </div>
            <div class="button" onclick="confirm()">
                <span>立即报名</span>
            </div>
            <div class="button confirm_cancel over">
                <span>取消</span>
            </div>
        </div>
        <div class="card" id="g_form" style="display: none;">
            <div class="title">请填写你的信息</div>
            <div class="form_item">
                <span>负责人姓名</span>
                <input class="username" type="text" name="username" placeholder="请填写负责人姓名">
            </div>
            <div class="form_item">
                <span>意向城市</span>
                <input class="address" type="text" name="address" placeholder="请输入意向城市">
            </div>
            <div class="form_item">
                <span>手机号</span>
                <input class="mobile" type="text" name="mobile" placeholder="请填写手机号">
            </div>
            <div class="button" onclick="confirm1()">
                <span>立即报名</span>
            </div>
            <div class="button confirm_cancel over">
                <span>取消</span>
            </div>
        </div>

    </div>
</div>
</body>
<script>
    let type;
    $(function(){

        $(".organization .button:not(.over)").click(()=>{
            $("#g_form").hide();
            $("#o_form").show();
            type="o_form";
            $(".form").addClass("show");
        });
        $(".group .button:not(.over)").click(()=>{
            $("#o_form").hide();
            $("#g_form").show();
            type="g_form";
            $(".form").addClass("show");
        });
        $(".button.confirm_cancel").click(()=>{
            $(".form").removeClass("show");
        });
    });
    
    function confirm(){
        let company_name=$("#"+type).find(".company_name").val();
        if(!company_name){
            layer.msg('请输入机构名称');
            return;
        }
        let username=$("#"+type).find(".username").val();
        if(!username){
            layer.msg('请输入负责人');
            return;
        }
        let address=$("#"+type).find(".address").val();
        if(!address){
            layer.msg('请输入城市');
            return;
        }
        let mobile=$("#"+type).find(".mobile").val();
        if(!isMobile(mobile))return;
        $.ajax({
            method:"POST",
            url:"/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'from'=>'mobile','r'=>'beilai.index.about','type'=>$type,'op'=>'confirm'));}",
            data:{
                mobile:mobile,
                username:username,
                address:address,
                company_name:company_name
            },
            success:function(res){
                res=JSON.parse(res);
                if(res.error=="0"){
                    layer.msg('提交成功');
                    window.history.go(-1);
                }
            }
        })
    }

    function confirm1(){
        let username=$("#"+type).find(".username").val();
        if(!username){
            layer.msg('请输入负责人');
            return;
        }
        let address=$("#"+type).find(".address").val();
        if(!address){
            layer.msg('请输入城市');
            return;
        }
        let mobile=$("#"+type).find(".mobile").val();
        if(!isMobile(mobile))return;
        $.ajax({
            method:"POST",
            url:"/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'from'=>'mobile','r'=>'beilai.index.about','type'=>$type,'op'=>'confirm'));}",
            data:{
                mobile:mobile,
                username:username,
                address:address
            },
            success:function(res){
                res=JSON.parse(res);
                if(res.error=="0"){
                    layer.msg('提交成功');
                    window.history.go(-1);
                }
            }
        })
    }

    
    function isMobile(mobile){
        if(mobile.length!=11){
            layer.msg('请正确输入手机号');
            return false;
        }else{
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
            if (!myreg.test(mobile)) {
                layer.msg('手机号有误');
                return false;
            }else{
            return true;
            }
        }
    }
</script>
</html>